<template>
	<div class="container">
		<el-tabs v-model="message">
			<el-tab-pane :label="`未读消息(${announcementData.length})`" name="first">
				<el-table :data="announcementData" :show-header="false" style="width: 100%">
					<el-table-column>
						<template #default="scope">
							<el-table-column prop="message"></el-table-column>
						</template>
					</el-table-column>
					<el-table-column prop="time" width="180"></el-table-column>
					<el-table-column width="120">
						<template #default="scope">
							<el-button size="small" @click="handleRead(scope.$index, scope.row.uuid)">标为已读</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="handle-row">
					<el-button type="primary" @click="handleAllRead('all')">全部标为已读</el-button>
				</div>
			</el-tab-pane>
			<el-tab-pane :label="`已读消息(${announcementReadData.length})`" name="second">
				<template v-if="message === 'second'">
					<el-table :data="announcementReadData" :show-header="false" style="width: 100%">
						<el-table-column>
							<template #default="scope">
								<el-table-column prop="message"></el-table-column>
							</template>
						</el-table-column>
						<el-table-column prop="time" width="160"></el-table-column>
						<el-table-column width="120">
							<template #default="scope">
								<el-button size="small" type="danger" @click="handleDel(scope.$index, scope.row.uuid)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="handle-row">
						<el-button type="danger" @click="handleAllDel('all')">删除全部</el-button>
					</div>
				</template>
			</el-tab-pane>
			<el-tab-pane :label="`回收站(${announcementDeleteData.length})`" name="third">
				<template v-if="message === 'third'">
					<el-table :data="announcementDeleteData" :show-header="false" style="width: 100%">
						<el-table-column>
							<template #default="scope">
								<el-table-column prop="message"></el-table-column>
							</template>
						</el-table-column>
						<el-table-column prop="time" width="160"></el-table-column>
						<el-table-column width="120">
							<template #default="scope">
								<el-button @click="handleRestore(scope.$index, scope.row.uuid)">还原</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="handle-row">
						<el-button type="danger" @click="clearRecycleBin('all')">清空回收站</el-button>
					</div>
				</template>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup lang="ts" name="systemmessage">
import {ref, reactive, onMounted, nextTick} from 'vue';
import API from "../utils/axios";
import {ElMessage} from "element-plus";

// 建立WebSocket连接
const ws = new WebSocket("ws://localhost:8085/webSocket");
ws.onopen = function (event){
	console.log('建立连接');
}
ws.onclose = function (event){
	console.log('连接关闭');
}
ws.onmessage= function (event){
	// 进行弹窗提醒或其他操作
	try {
		// 将接收到的 JSON 字符串转换成 JavaScript 对象
		const message = JSON.parse(event.data);
		// 设备数据处理
		if (message.dataType == "系统公告"){
			socketAnnouncement(message);
			getAnnouncement();
		}
	} catch (error) {
		console.error('JSON 解析出错', error);
	}
}
ws.onerror= function (){
	alert('websocket通信发生错误！')
};

// 处理WebSocket系统公告
const socketAnnouncement = (message : any) => {
	// 获取公告数据
	const socketData = message.dataBody[0];
	const data = socketData.map((item : any) => {
		return {uuid : item.announcementUuid, message : item.announcementType+item.announcementMessage, time : item.announcementTime}
	})
	announcementData.value = data;
}

// 在组件挂载前加载数据
onMounted(() => {
	// 获取未读系统公告
	(async () => {
		await getAnnouncement();
		await getReadAnnouncement();
		await getDeleteAnnouncement();
	})()
})

// 获取未读系统通告
let announcementData = ref([]);
const getAnnouncement = () => {
	API.post("/LogFile/getAnnouncement")
			.then((res) => {
				const data = res.data.data.map((item : any) => {
					return {uuid : item.announcementUuid, message : item.announcementType+item.announcementMessage, time : item.announcementTime}
				})
				announcementData.value = data;
				localStorage.setItem("newMessage", announcementData.value.length);
			})
			.catch((err) => {return err})
}

// 获取已读系统通告
let announcementReadData = ref([]);
const getReadAnnouncement = () => {
	API.post("/LogFile/getReadAnnouncement")
			.then((res) => {
				const data = res.data.data.map((item : any) => {
					return {uuid : item.announcementUuid, message : item.announcementType+item.announcementMessage, time : item.announcementTime}
				})
				announcementReadData.value = data;
			})
			.catch((err) => {return err})
}

// 获取逻辑删除系统通告
let announcementDeleteData = ref([]);
const getDeleteAnnouncement = () => {
	API.post("/LogFile/getDeleteAnnouncement")
			.then((res) => {
				const data = res.data.data.map((item : any) => {
					return {uuid : item.announcementUuid, message : item.announcementType+item.announcementMessage, time : item.announcementTime}
				})
				announcementDeleteData.value = data;
			})
			.catch((err) => {return err})
}

// 标记系统通告为已读
const markRead = (uuid : string) => {
	const formData = new FormData();
	formData.append("uuid", uuid);
	API.post("/LogFile/markRead", formData)
			.then((res) => {
				const data = res.data.data.map((item : any) => {
					ElMessage.success(res.data.data);
				})
			})
			.catch((err) => {return err})
}

// 标记系统通告为已读
const markDelete = (uuid : string) => {
	const formData = new FormData();
	formData.append("uuid", uuid);
	API.post("/LogFile/markDelete", formData)
			.then((res) => {
				const data = res.data.data.map((item : any) => {
					ElMessage.success(res.data.data);
				})
			})
			.catch((err) => {return err})
}

// 还原
const restore = (uuid : string) => {
	const formData = new FormData();
	formData.append("uuid", uuid);
	API.post("/LogFile/restore", formData)
			.then((res) => {
				const data = res.data.data.map((item : any) => {
					ElMessage.success(res.data.data);
				})
			})
			.catch((err) => {return err})
}

// 永久删除
const DeleteAnnouncement = (uuid : string) => {
	const formData = new FormData();
	formData.append("uuid", uuid);
	API.post("/LogFile/DeleteAnnouncement", formData)
			.then((res) => {
				const data = res.data.data.map((item : any) => {
					ElMessage.success(res.data.data);
				})
			})
			.catch((err) => {return err})
}

const message = ref('first');

// 标为单个已读
const handleRead = async (index: number, uuid : any) => {
	// 标记为已读
	await markRead(uuid);
	const item = announcementData.value.splice(index, 1);
	announcementReadData.value = announcementReadData.value.concat(item);
};

// 标记全部已读
const handleAllRead = async (uuid : any) => {
	// 标记为已读
	await markRead(uuid);
	announcementReadData.value = announcementReadData.value.concat(announcementData.value);
	announcementData.value = [];
}

// 标记单个逻辑删除
const handleDel = async (index: number, uuid : any) => {
	// 标记为逻辑删除
	await markDelete(uuid);
	const item = announcementReadData.value.splice(index, 1);
	announcementDeleteData.value = announcementDeleteData.value.concat(item);
};

// 标记全部已读
const handleAllDel = async (uuid : any) => {
	// 标记为已读
	await markDelete(uuid);
	announcementDeleteData.value = announcementDeleteData.value.concat(announcementReadData.value);
	announcementReadData.value = [];
}

// 还原
const handleRestore = (index: number, uuid : any) => {
	// 还原
	restore(uuid);
	const item = announcementDeleteData.value.splice(index, 1);
	announcementReadData.value = announcementReadData.value.concat(item);
};

// 清空回收站
const clearRecycleBin = (uuid : any) => {
	// 永久删除
	DeleteAnnouncement(uuid);
	announcementDeleteData.value = [];
};
</script>

<style>
.message-title {
	cursor: pointer;
}
.handle-row {
	margin-top: 30px;
}
</style>
